//清除标签默认样式;
2 .label(){
3 html {margin: 0; padding: 0; border: 0;_background-image:url(n1othing.txt)}
4 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
5 ol, ul, li { list-style: none; }
6 body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
7 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;}
8 caption, th, td { text-align: left; font-weight: normal; float: none !important; }
9 table, th, td, select, img, input,object{ vertical-align: middle;}
10 :focus { outline: 0;}
11 input,select{margin:0;}
12 a { color: #005EA7; text-decoration: none; }
13 a:hover {color: #C7000B; text-decoration: none; }
14 p,a,td{word-wrap:break-word;word-break:break-all;}
15 img { border: none;vertical-align:top; }
16 textarea{ resize:none;border:1px solid #ccc;}
17 textarea:hover{border-color:#ccc;}
18 input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius: 0;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
19 input[type="text"]{border:solid 1px #ccc; border-radius:0;}
20 dfn {font-style: normal;font-family: Arial;}
21 }
22
23 .fl(){ float:left; } //左浮动;
24 .fr(){ float:right;} //右浮动;
25 //设置方向浮动;
26 .float( @dire : left ){
27 float:@dire;
28 }
29 //清除浮动;
30 .clear(){
31 *zoom:1;
32 &:after{
33 content: "";
34 display: block;
35 height: 0;
36 clear: both;
37 visibility: hidden;
38 overflow: hidden;
39 }
40 }
41 //清右浮动;
42 .clr(){
43 clear: both;
44 display: block;
45 font-size: 0;
46 height: 0;
47 line-height: 0;
48 overflow: hidden;
49 }
50
51 /**
52 * 循环初始字体大小:
53 * @end : 结束字体大小(数字),必须输;
54 * @begin : 开始字体大小(数字),可以省略;
55 * @un : 字体单位(字符串),可以省略;
56 * 例子 : .base-fonts(28);
57 */
58 .base-fonts( @end,@begin:12,@un:px) when ( @begin =< @end ) {
59 .f-@{begin}{
60 font-size:unit(@begin, @un);
61 }
62 .base-fonts( @end,( @begin+2 ),@un );
63 }
64
65 /**
66 * 循环初始默认样式:
67 * @name : 样式前缀名,必须输;
68 * @style : 设置样式,必须输;
69 * @end : 结束样式,必须输;
70 * @begin : 开始样式,可以省略;
71 * @mult : 循环累加倍数,可以省略;
72 * @un : 字体单位(字符串),可以省略;
73 * 例子 : .base-styles(mb,margin-bottom,30,5);
74 */
75 .base-styles(@name:name,@style,@end,@begin:5,@mult:5,@un:px ) when ( @begin =< @end ) {
76 .@{name}-@{begin}{
77 @{style}:unit(@begin, @un);
78 }
79 .base-styles( @name,@style,@end,(@begin+@mult),@mult,@un );
80 }
81
82 //一行显示。。。。
83 .ellipsis(){
84 white-space:nowrap;
85 text-overflow:ellipsis;
86 overflow:hidden;
87 }
88 /* 强制折行 */
89 .break-word(){
90 word-break:break-all; /*支持IE，chrome，FF不支持*/
91 word-wrap:break-word; /*支持IE，chrome，FF*/
92 }
93
94 //设置字体;
95 .f(@size:12,@un:px){font-size:unit(@size, @un); }
96 //设置字体;
97 .fa(@family:'Microsoft Yahei'){ font-family:@family,'宋体','黑体';}
98 .tal(){ text-align: left; }
99 .tar(){ text-align: right; }
100 .tac(){ text-align: center; }
101 .text-align( @dir:left ){text-align: @dir;}
102 .over(){overflow:hidden; }
103 .ofv(){overflow:visible !important;}
104 .hide(){ display:none; }
105 .block(){ display:block; }
106 .abs(){ position: absolute; }
107 .rel(){ position: relative; }
108 .cur(){ cursor: pointer; }
109 .def(){ cursor:default;}
110
111 //css3过渡;
112 .tran(@name:all,@time:2s){
113 -webkit-transition : @name @time; /* Safari 和 Chrome */
114 -moz-transition : @name @time; /* Firefox 4 */
115 -ms-transition : @name @time; /* IE */
116 -o-transition : @name @time; /* Opera */
117 transition : @name @time;
118 }
119
120 //css3;
121 .css3( @style,@frames ){
122 -webkit-@{style} : @frames; /* Safari 和 Chrome */
123 -moz-@{style} : @frames; /* Firefox 4 */
124 -ms-@{style} : @frames; /* IE */
125 -o-@{style} : @frames; /* Opera */
126 @{style} : @frames;
127 }
128
129 //透明;
130 .opa(@num:0.8){
131 opacity : @num;
132 filter : ~'alpha(opacity='@num*100~')';
133 }
134
135 //css3圆角;
136 .border-radius(@radius: 5px) {
137 -webkit-border-radius : @radius; /* Safari 和 Chrome */
138 -moz-border-radius : @radius; /* Firefox 4 */
139 -ms-border-radius : @radius; /* IE */
140 -o-border-radius : @radius; /* Opera */
141 border-radius : @radius;
142 }
143
144 /**
145 * css3动画,只能写在调用页面,配合.css3( @style,@frames )使用;
146 * 例子 :
147 * .keyframes(starts,{
148 0% {transform:rotate(0deg)}
149 100%{transform:rotate(360deg)}
150 });
151 .className{.css3(animation,starts 8s linear infinite .3s );}
152 */
153 .keyframes(@name, @frames) {
154 @-webkit-keyframes @name { @frames(); } /* Safari 和 Chrome */
155 @-moz-keyframes @name { @frames(); } /* Firefox 4 */
156 @-ms-keyframes @name { @frames(); } /* IE */
157 @-o-keyframes @name { @frames(); } /* Opera */
158 @keyframes @name { @frames(); }
159 }
160
161 //打包默认样式;
162 .base(@content:950,@unit:px,@orange:#f60,@yellow:#fff000,@blue:#5fb3d2,@red:#ff546a,@gray:#ccc,@disabled:#ccc,@bor_color:#ccc){
163 .label();
164 /* 默认浮动 */
165 .fl{
166 .fl();
167 }
168 .fr{
169 .fr();
170 }
171 .clear{
172 .clear();
173 }
174 /* 显示隐藏 */
175 .hide{
176 .hide();
177 }
178 .show{
179 .block();
180 }
181 /* 文本方向 */
182 .tal{
183 .tal();
184 }
185 .tar{
186 .tar();
187 }
188 .tac{
189 .tac();
190 }
191 /* 截取 */
192 .over{
193 .over();
194 }
195 .ofv{
196 .ofv();
197 }
198 /* 定位 */
199 .abs{
200 .abs();
201 }
202 .rel{
203 .rel();
204 }
205 /* 鼠标手势 */
206 .cursor{
207 .cur();
208 }
209 .def{
210 .def();
211 }
212 /* 。。。。 */
213 .ellipsis{
214 .ellipsis();
215 }
216 /* 强制折行 */
217 .break-word{
218 .break-word();
219 }
220 /* 默认颜色 */
221 .colr-red{color: @red;}
222 .colr-blue{color: @blue;}
223 .colr-gray{color: @gray;}
224 .colr-yellow{color: @yellow;}
225 .colr-org{color: @orange;}
226 /* 默认背景颜色 */
227 .bg-red{ background-color: @red;}
228 .bg-blue{background-color: @blue;}
229 .bg-gray{background-color: @gray;}
230 .bg-yellow{background-color: @yellow;}
231 .bg-org{background-color: @orange;}
232 /* 默认置灰 */
233 .disabled{ background-color:@disabled; }
234 /* 默认字体 */
235 .base-fonts(32,@un:@unit);
236 /* margin padding */
237 .mt0 { margin-top: 0 !important; }
238 .base-styles(mt,margin-top,30,5,@un:@unit);
239 .mb0 { margin-bottom: 0 !important; }
240 .base-styles(mb,margin-bottom,30,5,@un:@unit);
241 .ml0 { margin-left: 0 !important; }
242 .base-styles(ml,margin-left,30,5,@un:@unit);
243 .mr0 { margin-right: 0 !important; }
244 .base-styles(mr,margin-right,30,5,@un:@unit);
245 /* 高度 */
246 .base-styles(blk,height,50,5,@un:@unit);
247 /* 边框 */
248 .bor_t{ border-top:solid 1px @bor_color;}
249 .bor_l{ border-left:solid 1px @bor_color;}
250 .bor_r{ border-right:solid 1px @bor_color;}
251 .bor_b{ border-bottom:solid 1px @bor_color;}
252 .bor_t0{ border-top:none!important;}
253 .bor_l0{ border-left:none!important;}
254 .bor_r0{ border-right:none!important;}
255 .bor_b0{ border-bottom:none!important;}
256 .bor_das{ border:1px dashed @bor_color;}
257 .bor_dot{ border:1px dotted @bor_color;}
258 .border{ border:1px solid @bor_color;}
259 /* box */
260 .content{ width: unit(@content,@unit); margin:0 auto; }
261 }